<!-- 热门活动 -->
<template>
  <div style="padding: 20px">
    <div class="margin-top-20">
      <el-input
        placeholder="请输入查询内容"
        v-model="searchText"
        style="width: 50%"
      >
      </el-input>
      <el-button>搜索活动</el-button>
      <el-button @click="clickShowMore">{{
        showMore ? "收起条件" : "搜索条件"
      }}</el-button>
    </div>
    <div v-if="showMore">
      <div class="margin-top-20">
        参与作品分类：
        <el-radio-group v-model="classify">
          <el-radio-button
            v-for="(item, key) in classifyOptions"
            :label="item"
            :key="key"
          >
          </el-radio-button>
        </el-radio-group>
      </div>
      <div class="margin-top-20">
        参与作品数量：
        <el-radio-group v-model="worksCount">
          <el-radio-button
            v-for="(item, key) in worksCountOptions"
            :label="item.value"
            :key="key"
            >{{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </div>
      <div class="margin-top-20">
        作品总播放量：
        <el-radio-group v-model="worksPlayCount">
          <el-radio-button
            v-for="(item, key) in worksPlayCountOptions"
            :label="item.value"
            :key="key"
            >{{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </div>
      <div class="margin-top-20">
        活动页评论数
        <el-radio-group v-model="commentCount">
          <el-radio-button
            v-for="(item, key) in commentCountOptions"
            :label="item.value"
            :key="key"
            >{{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </div>
      <div class="margin-top-20">
        <span class="searchSelect">
          活动状态：<el-select v-model="statusOption" placeholder="不限">
            <el-option
              v-for="item in statusSelectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </span>
        <span class="searchSelect">
          参与UP主性别：<el-select v-model="genderOption" placeholder="不限">
            <el-option
              v-for="item in genderSelectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </span>
        <span class="searchSelect">
          是否关联商品：<el-select v-model="relatedOption" placeholder="不限">
            <el-option
              v-for="item in relatedSelectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </span>
      </div>
    </div>
    <!-- 显示结果 -->
    <div
      class="margin-top-20"
      style="display: flex; justify-content: space-between"
    >
      <span>
        <el-radio-group v-model="pageOrder">
          <el-radio-button
            v-for="(item, key) in pageOrderOptions"
            :label="item"
            :key="key"
          ></el-radio-button>
        </el-radio-group>
      </span>
      <span>
        <el-radio-group v-model="lastDays">
          <el-radio-button
            v-for="(item, key) in lastDaysOptions"
            :label="item.value"
            :key="key"
            >{{ item.label }}</el-radio-button
          >
        </el-radio-group>
      </span>
    </div>
    <paged-result />
  </div>
</template>

<script>
import PagedResult from "./components/PagedResult.vue";

export default {
  name: "",
  data: function () {
    return {
      showMore: true,
      searchText: "",
      classify: "全部",
      worksCount: "全部",
      worksPlayCount: "全部",
      commentCount: "全部",
      statusOption: "不限",
      genderOption: "不限",
      relatedOption: "不限",
      pageOrder: "参与作品最多",
      lastDays: "-1",
      classifyOptions: [
        "全部",
        "动画",
        "游戏",
        "影视",
        "生活",
        "兴趣",
        "轻小说",
        "科技",
        "鬼畜",
        "动物圈",
        "汽车",
      ],
      worksCountOptions: [
        { label: "不限", value: "不限" },
        { label: "少于100万", value: "100w" },
      ],
      worksPlayCountOptions: [
        { label: "不限", value: "不限" },
        { label: "少于100万", value: "100w" },
      ],
      commentCountOptions: [
        { label: "不限", value: "不限" },
        { label: "少于100万", value: "100w" },
      ],
      statusSelectOptions: [
        { label: "不限", value: "不限" },
        { label: "少于100万", value: "100w" },
      ],
      genderSelectOptions: [{ label: "不限", value: "不限" }],
      relatedSelectOptions: [
        { label: "不限", value: "不限" },
        { label: "少于100万", value: "100w" },
      ],
      pageOrderOptions: ["参与作品最多", "播放总数最多", "活动页评论最多"],
      lastDaysOptions: [
        { label: "不限", value: -1 },
        { label: "最近7天", value: 7 },
        { label: "最近15天", value: 15 },
        { label: "最近30天", value: 30 },
        { label: "最近90天", value: 90 },
      ],
    };
  },

  components: { PagedResult },

  computed: {},

  mounted: function () {},

  methods: {
    clickShowMore() {
      this.showMore = !this.showMore;
    },
  },
};
</script>
<style lang="scss" scoped>
.searchSelect {
  margin-right: 20px;
}
</style>
